import { encodeBackgroundStyle } from './transferPageStyle';

const widget2UI = function (widget, componentMap) {
  const UI = {};
  // 基本属性
  UI.id = widget.id;
  UI.cId = widget.cId;
  UI.name = getWidget(widget.component, componentMap);
  UI.label = widget.label;
  const { config, style } = widget;
  UI.cData = config;
  UI.style = style;
  // 公共样式
  UI.position = { position: style.position, top: style.top, left: style.left };
  UI.size = { w: style.width, h: style.height };
  UI.style.marginTop = widget.style.paddingTop;
  UI.style.marginBottom = widget.style.paddingBottom;
  UI.style.marginLeft = widget.style.paddingLeft;
  UI.style.marginRight = widget.style.paddingRight;
  if (config.hasOwnProperty('background')) UI.cData.background = encodeBackgroundStyle(widget.config.background);

  // 组合组件Group:解析子组件
  if (UI.name === 'group') UI.cData.component = UI.cData.component.map((item) => widget2UI(item));
  return UI;
};

function getWidget(name, componentMap) {
  return Object.keys(componentMap).find((key) => componentMap[key] === name);
}

export { widget2UI };
